<template>
  <div id="pieChart" style=" background-color: #FFFFFF;">
    <el-row>
      <!-- <el-col style="margin: 5px;"> -->
        <el-dropdown @command="selecteGroupBy">
          <el-button size="small" type="primary">
            <span v-text="commandName"></span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{comName:'种类销量',val:'typeName'}">种类销量</el-dropdown-item>
            <el-dropdown-item :command="{comName:'商品销量',val:'productId'}">商品销量</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      <!-- </el-col> -->
    </el-row>
    <!-- <el-row id="pieChartPanel" style="height: 780px;"></el-row> -->
    <div id="pieChartPanel" style="height: 780px;"></div>
  </div>
</template>

<script>
  const echarts = require('echarts');
  const axios = require('axios');
  export default {
    name: 'pieChart',
    data() {
      return {
        commandName: '种类销量',
        chart: {},
        pieChart: {
          // title: {
          //   text: '销量分布',
          //   left: 'center'
          // },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : ({d}%) <br/> {c} 元'
          },
          legend: {
            // height:300,
            // type: 'scroll',
            orient: 'vertical',
            left: '0%',
            selected: {},
            tooltip: {
              show: true
            },
            formatter: function(name) {
              if (!name) {
                return '';
              }
              if (name.length >= 8) {
                return name.slice(0, 4) + '...';
              } else {
                return name
              }
            },
            data: []
          },
          series: [{
            name: '销量',
            radius: '70%',
            type: 'pie',
            left: '40%',
            avoidLabelOverlap: true,
            label: {
              normal: {
                formatter(v) {
                  let text = Math.round(v.percent) + '%' + '' + v.name
                  if (v.name.length <= 8) {
                    return v.name
                  } else if (v.name.length > 8) {
                    return v.name.slice(0, 16) + '...'
                  }
                }
              }
            },
            data: []
          }],

        },
        params: {
          sellerAccount: this.$store.getters.seller.sellerAccount,
          groupBy: ''
        },
        tatisticssData: {

        }
      }
    },

    methods: {
      selecteGroupBy(groupBy) {
        this.commandName = groupBy.comName
        this.doGetStatistics(groupBy.val)
          .then(res => {
            let total = 0;
            res.data.forEach((item) => {
              total += item.toltalTurnover
            })
            this.pieChart.series[0].data = []
            this.pieChart.legend.data = []

            if (groupBy.val === 'typeName') {
              res.data.forEach((item) => {
                this.pieChart.series[0].data.push({
                  name: item.typeName,
                  value: item.toltalTurnover
                })
                this.pieChart.legend.data.push(item.typeName)
                if (item.toltalTurnover / total * 100 < 1)
                  this.pieChart.legend.selected[item.typeName] = false
              })
            } else {
              res.data.forEach((item) => {
                this.pieChart.series[0].data.push({
                  name: item.productName,
                  value: item.toltalTurnover
                })
                this.pieChart.legend.data.push(item.productName)
                if (item.toltalTurnover / total * 100 < 1)
                  this.pieChart.legend.selected[item.productName] = false
              })
            }




            this.chart.setOption(this.pieChart);
          })
      },
      // 设置饼状图
      setPieChart() {
        this.chart = echarts.init(document.getElementById('pieChartPanel'), null, {
          renderer: 'svg'
        });
        this.doGetStatistics('typeName')
          .then(res => {
            let total = 0;
            res.data.forEach((item) => {
              total += item.toltalTurnover
            })
            res.data.forEach((item) => {
              this.pieChart.series[0].data.push({
                name: item.typeName,
                value: item.toltalTurnover
              })
              this.pieChart.legend.data.push(item.typeName)
              if (item.toltalTurnover / total * 100 < 1)
                this.pieChart.legend.selected[item.typeName] = false
            })
            this.chart.setOption(this.pieChart);
            window.addEventListener("resize", () => {
              this.chart.resize();
            });
          })
      },
      //获取数据
      doGetStatistics(groupBy) {
        if (groupBy === undefined)
          this.params.groupBy = ''
        else
          this.params.groupBy = groupBy
        return axios.get("http://localhost:8080/order/getStatistics", {
          params: this.params
        })
      }
    },
    created() {
      setTimeout(() => {
        this.setPieChart();
      }, 200)

    }
  }
</script>

<style>
</style>
